<template>
  <div class="detailitemparams">
    <!-- 使用Object.keys(itemParams).length!=0 判断itemParams的值是否为空，
        结合v-if来设置是否渲染后面的数据-->
    <div class="rule" v-if="Object.keys(itemParams).length != 0">
      <div
        v-for="(item, index) in itemParams.rule.tables[0]"
        :key="index"
        class="ruleinfo"
      >
        <span v-for="(inneritem, innerindex) in item" :key="innerindex">
          {{ inneritem }}
        </span>
      </div>
    </div>
    <div class="info" v-if="Object.keys(itemParams).length != 0">
      <div v-for="(item, index) in itemParams.info.set" :key="index">
        <span>{{ item.key }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "DetailItemParams",
  data() {
    return {};
  },
  props: {
    itemParams: {
      type: Object,
      default: {},
    },
  },
  created() {
    var size = this.itemParams;
    console.log();
  },
};
</script>
<style lang="css" scoped>
.detailitemparams {
  padding: 20px 0px;
  border-bottom: 2px solid rgb(226, 226, 226);
}
.ruleinfo {
  margin: 0px 20px;
  border-bottom: 1px solid rgb(226, 226, 226);
  padding: 10px 0px;
}
.ruleinfo span {
  text-align: center;
  font-size: 14px;
}
.ruleinfo span:nth-child(1) {
  width: 60px;
  margin-right: 20px;
}
.ruleinfo span:not(:first-child) {
  display: inline-block;
  width: 60px;
  text-align: center;
}

.info div {
  margin: 0px 20px;
  border-bottom: 1px solid rgb(226, 226, 226);
  padding: 10px 0px;
}
.info div:last-child {
  border-bottom: none;
}
.info div span {
  text-align: center;
  font-size: 14px;
}
.info div span:nth-child(1) {
  display: inline-block;
  text-align: left;
  width: 100px;
  height: 100%;
  vertical-align: middle;
}
.info div span:not(:first-child) {
  text-align: left;
  display: inline-block;
  width: 220px;
  word-wrap: normal;
  color: #ff5777;
}
</style>
